<template>
  <label
    class="t-checkbox-wrapper"
    :class="[
      `t-checkbox-size-${prop.size}`,
      prop.disabled ? 't-checkbox-wrapper-disabled' : '',
    ]"
    @click.prevent="toggle"
  >
    <span class="t-checkbox" :class="{ 't-checkbox-checked': prop.checked }">
      <span class="t-checkbox-inner"></span>
      <input
        class="t-checkbox-input"
        :disabled="prop.disabled"
        type="checkbox"
        name=""
      />
    </span>
    <span>
      <slot></slot>
    </span>
  </label>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import PropData from "@/views/props/Checkbox.prop";
const prop = defineProps(PropData);
const emit = defineEmits(["update:checked"]);
const toggle = () => {
  // 如果不可点击或者只读
  if (prop.disabled || prop.readonly) {
    return;
  }
  emit("update:checked", !prop.checked);
};
</script>
<style lang="scss" scoped>
.t-checkbox-wrapper {
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  > .t-checkbox {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
    position: relative;
    margin-right: 3px;
    > .t-checkbox-inner {
      display: inline-block;
      position: relative;
      top: 0;
      left: 0;
      border: 1px solid #dcdee2;
      border-radius: 2px;
      background-color: #fff;
      transition: border-color 0.2s ease-in-out,
        background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
      &::after {
        content: "";
        display: table;
        position: absolute;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(0);
        transition: all 0.2s ease-in-out;
      }
    }
    > .t-checkbox-input {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
    }
    .t-checkbox-input[disabled] {
      cursor: not-allowed;
    }
  }
  > .t-checkbox-checked {
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid #1890ff;
      border-radius: 2px;
      visibility: hidden;
      -webkit-animation: antCheckboxEffect 0.6s ease;
      animation: antCheckboxEffect 0.6s ease;
      -webkit-animation-fill-mode: backwards;
      animation-fill-mode: backwards;
      content: "";
    }
    > .t-checkbox-inner {
      border-color: #2d8cf0;
      background-color: #2d8cf0;
      &::after {
        position: absolute;
        display: table;
        border: 3px solid #fff;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(1) translate(-50%, -50%);
        opacity: 1;
        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
        content: " ";
      }
    }
  }
  @keyframes antCheckboxEffect {
    from {
      transform: scale(1, 1);
    }

    30% {
      transform: scale(1.25, 0.75);
    }

    40% {
      transform: scale(0.75, 1.25);
    }

    50% {
      transform: scale(1.15, 0.85);
    }

    65% {
      transform: scale(0.95, 1.05);
    }

    75% {
      transform: scale(1.05, 0.95);
    }

    to {
      transform: scale(1, 1);
    }
  }
}
.t-checkbox-size-default {
  > .t-checkbox {
    > .t-checkbox-inner {
      width: 16px;
      height: 16px;
      &::after {
        width: 3px;
        height: 8px;
        top: 7px;
        left: 4px;
      }
    }
  }
}
.t-checkbox-size-large {
  > .t-checkbox {
    > .t-checkbox-inner {
      width: 20px;
      height: 20px;
      &::after {
        width: 4px;
        height: 10px;
        top: 9px;
        left: 4px;
      }
    }
  }
}

.t-checkbox-size-small {
  > .t-checkbox {
    > .t-checkbox-inner {
      width: 14px;
      height: 14px;
      &::after {
        width: 3px;
        height: 8px;
        top: 6px;
        left: 2px;
      }
    }
  }
}

.t-checkbox-wrapper-disabled {
  cursor: not-allowed;
  .t-checkbox {
    .t-checkbox-inner {
      background-color: #f3f3f3;
      border-color: #dcdee2;
      &::after {
        animation-name: none;
        border-color: #ccc;
      }
    }
  }
  span {
    color: #ccc;
    cursor: not-allowed;
  }
}
</style>
